<template>
    <div id="left-col">
        <div class='left-top'></div>
        <Center></Center>
    </div>
</template>
<script>
import Center from '@/components/leftmain-center'
export default {
  name: 'LeftMain',
  components: {
    Center
  }
}
</script>
<style scoped lang='less'>
@import '../assets/leftmain.less';
#left-col {
    background: rgba(255,255,255,1);
    width: 25rem;
    position: fixed;
    opacity: 1;
    height: 100%;
}
.left-top {
    width: 100%;
    height: 15rem;
    background-color: #7b5b5f;
    position: absolute;
    opacity: 0.7;
}
@media screen and (max-width: 800px) {
    #left-col {
        background: #fff;
        width: 100%;
        position: static;
        opacity: 1;
        height: 70%;
        overflow: hidden;
    }
    .left-top {
        width: 100%;
        height: 10rem;
        background-color: #000;
        position: absolute;
        opacity: 0.7;
    }
}
</style>
